<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Refresh" content="3">
<title>无标题文档</title>
</head>
<style>
	div p{
		background-color:yellw;
	}
	a:link{
		color:aqua;
	}/*未访问链接*/
	a:visited{
		color:antiquewhite;
	}/*已访问链接*/
	a:hover{
		color:blue;
	}/*鼠标移动到链接上*/
	a:active{
		color:chartreuse;
	}/*鼠标点击时*/
	P:first-child{
		color:aqua;
		fot-size:xx-large;
	}
	ul{
		list-style-type:none;/*表示移出列表前的小标志，一个导航栏并不需要列表标记*/
		margin:0;
		padding:0;
	}
	li a{
		display:block;
		width:65px;
		background-color:aqua;
	}
	.tooltip{
		position:relative;
		display:inline-block;
		border-bottom:1px dotted black;
	}
	.tooltip.tooltiptext{
		visibility: hidden;
		width:120px;
		background-color:black;
		color:aqua;
		text-align:center;
		border-radius:6px;
		padding:5px 0;
		/*定位*/
		position:absolute;
		z-index:1;
	}
	.tooltip:hover.tooltiptext{
		visibility: visible;
	}
	[title]
	{
		color:red;
	}
</style>
<body style="text-align:center;">
	<h1 title="hello world"></h1>
	<a tittle="runoob.com" href="http://ww.runoob.com"></a>
	<div class="tooltip">鼠标移动到这<span class="tooltiptext">提示文本</span></div>
	<ul>
		<li><a href="http://www.baidu.com">主页</a></li>
		<li><a href="http://www.baidu.com">新闻</a></li>
		<li><a href="http://www.baidu.com">联系</a></li>
		<li><a href="http://www.baidu.com">关于</a></li>
	</ul>
	<p>你可以使用“first-letter"伪元素向文本的首字母设置特殊样式：</p>
	<p><a href="http://www.baidu.com" target="_blank">链接</a></p>
	<div>
		<p>段落1，在div中</p>
		<p>段落2，在div中</p>
	</div>
	<p>段落3，不在div中</p>
	<p>段落4，不在div中</p>
</body>
</html>
